<script setup>
import { computed } from 'vue'

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  totalPages: {
    type: Number,
    required: true
  }
})

const emit = defineEmits(['update:currentPage', 'page-change'])

const handlePrev = () => {
  if (props.currentPage > 1) {
    emit('update:currentPage', props.currentPage - 1)
    emit('page-change', props.currentPage - 1)
  }
}

const handleNext = () => {
  if (props.currentPage < props.totalPages) {
    emit('update:currentPage', props.currentPage + 1)
    emit('page-change', props.currentPage + 1)
  }
}

const handlePageClick = (page) => {
  if (page !== props.currentPage) {
    emit('update:currentPage', page)
    emit('page-change', page)
  }
}

const isPrevDisabled = computed(() => props.currentPage <= 1)
const isNextDisabled = computed(() => props.currentPage >= props.totalPages)

const displayPages = computed(() => {
  const pages = []
  const totalPages = props.totalPages
  const currentPage = props.currentPage

  if (totalPages <= 6) {
    // 如果总页数小于等于6，显示所有页码
    for (let i = 1; i <= totalPages; i++) {
      pages.push(i)
    }
  } else {
    // 始终显示第一页
    pages.push(1)
    // 计算当前页码附近的页码
    if (currentPage <= 3) {
      // 当前页码靠近开始
      for (let i = 2; i <= 4; i++) {
        pages.push(i)
      }
      pages.push('...')
    } else if (currentPage >= totalPages - 2) {
      // 当前页码靠近结束
      pages.push('...')
      for (let i = totalPages - 3; i <= totalPages; i++) {
        pages.push(i)
      }
    } else {
      // 当前页码在中间
      pages.push('...')
      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
        pages.push(i)
      }
      pages.push('...')
    }

    // 始终显示最后一页
    if (currentPage < totalPages - 2) {
      pages.push(totalPages)
    }
  }

  return pages
})
</script>

<template>
  <div class="pagination">
    <button 
      @click="handlePrev" 
      :disabled="isPrevDisabled"
      class="pagination-btn"
    >
      上一页
    </button>
    <template v-for="(page, index) in displayPages" :key="index">
      <span 
        v-if="page !== '...'"
        @click="handlePageClick(page)"
        class="pagination-page"
        :class="{ 'active': page === currentPage }"
      >
        {{ page }}
      </span>
      <span v-else class="pagination-ellipsis">{{ page }}</span>
    </template>
    <button 
      @click="handleNext" 
      :disabled="isNextDisabled"
      class="pagination-btn"
    >
      下一页
    </button>
  </div>
</template>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 20px 0;
}

.pagination-btn {
  padding: 5px 15px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background: #f5f5f5;
}

.pagination-btn:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
  color: #999;
}

.pagination-page {
  padding: 5px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-page:hover {
  background: #f5f5f5;
}

.pagination-page.active {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.pagination-ellipsis {
  padding: 5px 10px;
  color: #666;
  cursor: default;
}
</style>


